<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>商品浏览核算</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="./layui/css/layui.css">
  <link rel="stylesheet" href="./css/style.css">
  <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
  <script src="js/resize.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

  <div class="layui-header">
    <div class="layui-logo"><img src="images/logo.jpg" alt="思联画饰"></div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <!-- <div class="nav-bar">
        <span>005859 | 广东富骏金控股权投资有限公司</span>
    </div> -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item serach">
        <a href="javascript:;">
          <img src="images/serach.jpg">
        </a>
      </li>
      <li class="layui-nav-item mess">
        <a href="javascript:;">
          <img src="images/mess.jpg">
        </a>
      </li>
      <li class="layui-nav-item">
        <a href="javascript:;" class="user">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          <span class="username">JunieLuo.KK</span>
        </a>
        
      </li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <a class="menu-btn" href="javascript:;"><i class="layui-icon layui-icon-spread-left" id="LAY_app_flexible"></i></a>
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <!-- <li class="layui-nav-item layui-nav-itemed" ><a href="javascript:;">首页</a></li> -->
        <li class="layui-nav-item">
          <a href="javascript:;">业务管理</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">商品浏览</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">销售管理</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">订单管理</a></dd>
            <dd><a href="javascript:;">购物清单</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">客户通讯录</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">群主管理</a></dd>
            <dd><a href="javascript:;">添加用户</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">统计及报告</a>
        </li>
      </ul>
      <a href="javascript:;" class="layui-btn layui-btn1">退出</a>
    </div>
  </div>
  
  <div class="layui-body hs-body">
    <div class="hs-body-cont">
      <div class="count-module">
        <div class="count-module-top clearfix">
          <div class="count-module-tl">
            <div class="item">
              <label>客户姓名</label>
              <div class="name">JunieLuo.KK</div>
            </div>
            <div class="item">
              <label>公司名称</label>
              <div class="name">广东富骏金控股权投资有限公司</div>
            </div>
          </div>
          <div class="count-module-tr">
            <a href="javascript:;">订单提交</a>
          </div>
        </div>
        <div class="count-list clearfix">
          <div class="count-list-box count-list-box-1">
            <div class="count-list-head">
              <h3>订单总额</h3>
              <div class="pay-total" data-value="210.51">$210.51</div>
            </div>
            <div class="count-list-cont">
              <p>订单总额依据商品金额以及税费费用之和，请确认好两者金额再行提交。</p>
            </div>
          </div>
          <div class="count-list-box count-list-box-2">
            <div class="count-list-head">
              <h3>商品合计</h3>
              <div class="pay" data-value="100.51" data-total="100.51">$100.51</div>
              <div class="pay-edit clearfix" style="display:none;">
                <div class="pay-edit-input">
                  <label>$</label>
                  <input type="text" name="title" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
                <div class="pay-edit-btn">
                  <button type="button" class="layui-btn">原合计值</button>
                  <button type="button" class="layui-btn keep-btn">保存</button>
                </div> 
              </div>
            </div>
            <div class="count-list-cont">
              <button type="button" class="layui-btn count-edit">修改</button>
              <button type="button" class="layui-btn num-btn" data-value="-0.1">-10%</button>
              <button type="button" class="layui-btn num-btn select" data-value="-0.2">-20%</button>
              <button type="button" class="layui-btn num-btn" data-value="-0.3">-30%</button>
            </div>
          </div>
          <div class="count-list-box">
            <div class="count-list-head">
              <h3>付款类型</h3>
              <div class="pay" data-value="100" data-total="100">$100</div>
              <div class="pay-edit clearfix" style="display:none;">
                <div class="pay-edit-input">
                  <label>$</label>
                  <input type="text" name="title" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
                <div class="pay-edit-btn pay-edit-btn-1">
                  <button type="button" class="layui-btn keep-btn">保存</button>
                </div> 
              </div>
            </div>
            <div class="count-list-cont">
              <button type="button" class="layui-btn count-list-btn count-edit count-edit1">预付定金</button>
              <button type="button" class="layui-btn count-list-btn all-pay">全额支付</button>
            </div>
          </div>
          <div class="count-list-box">
            <div class="count-list-head">
              <h3>税费费用</h3>
              <div class="pay" data-value="10" data-total="10">$10</div>
            </div>
            <div class="count-list-cont">
              <button type="button" class="layui-btn num-btn select" data-value="0">0</button>
              <button type="button" class="layui-btn num-btn" data-value="0.1" >10%</button>
            </div>
          </div>
          <div class="count-list-box">
            <div class="count-list-head count-list-head-1">
              <h3>付款方式</h3>
            </div>
            <div class="count-list-cont">
              <form class="layui-form" action="">
                <input type="radio" name="way" value="微信支付" title="微信支付" checked>
                <input type="radio" name="way" value="现金支付" title="现金支付">
                <input type="radio" name="way" value="支付宝" title="支付宝">
                <input type="radio" name="way" value="银行卡" title="银行卡">
                <input type="radio" name="way" value="银行汇款" title="银行汇款">
              </form>
            </div>
          </div>
        </div>
      </div>

      <!--新增备注-->
      <div class="product-remark">
        <textarea placeholder="请填写备注"></textarea>
      </div>


      <div class="goods-module">
        <div class="goods-item">
          <div class="goods-pic"><img src="images/pr.png" alt=""></div>
          <div class="goods-info">
            <div class="goods-name clearfix">
              <h3>BQPT1262 | Fantasy Coral IV</h3>
              <p>$<span>17.94</span></p>
            </div>
            <div class="goods-size">Size | W910mm x H1100mm ; W25.2inches x H29.5inches</div>
            <div class="goods-js">
              <div class="goods-num"><input type="text" name="title" required lay-verify="required" value="3" data-value="3" autocomplete="off" class="layui-input"></div>
              <div class="goods-money">$53.82</div>
            </div>
          </div>
          <button type="button" class="layui-btn delbtn">删除</button>
        </div>
        <div class="goods-item">
          <div class="goods-pic"><img src="images/pr.png" alt=""></div>
          <div class="goods-info">
            <div class="goods-name clearfix">
              <h3>BQPT1262 | Fantasy Coral IV</h3>
              <p>$<span>17.94</span></p>
            </div>
            <div class="goods-size">Size | W910mm x H1100mm ; W25.2inches x H29.5inches</div>
            <div class="goods-js">
              <div class="goods-num"><input type="text" name="title" required lay-verify="required" value="1" data-value="1" autocomplete="off" class="layui-input"></div>
              <div class="goods-money">$53.82</div>
            </div>
          </div>
          <button type="button" class="layui-btn delbtn">删除</button>
        </div>
        <div class="goods-item">
          <div class="goods-pic"><img src="images/pr.png" alt=""></div>
          <div class="goods-info">
            <div class="goods-name clearfix">
              <h3>BQPT1262 | Fantasy Coral IV</h3>
              <p>$<span>17.94</span></p>
            </div>
            <div class="goods-size">Size | W910mm x H1100mm ; W25.2inches x H29.5inches</div>
            <div class="goods-js">
              <div class="goods-num"><input type="text" name="title" required lay-verify="required" value="2" data-value="2" autocomplete="off" class="layui-input"></div>
              <div class="goods-money">$53.82</div>
            </div>
          </div>
          <button type="button" class="layui-btn delbtn">删除</button>
        </div>
        <div class="goods-item">
          <div class="goods-pic"><img src="images/pr.png" alt=""></div>
          <div class="goods-info">
            <div class="goods-name clearfix">
              <h3>BQPT1262 | Fantasy Coral IV</h3>
              <p>$<span>17.94</span></p>
            </div>
            <div class="goods-size">Size | W910mm x H1100mm ; W25.2inches x H29.5inches</div>
            <div class="goods-js">
              <div class="goods-num"><input type="text" name="title" required lay-verify="required" value="5" data-value="5" autocomplete="off" class="layui-input"></div>
              <div class="goods-money">$53.82</div>
            </div>
          </div>
          <button type="button" class="layui-btn delbtn">删除</button>
        </div>
      </div>
    </div>
  </div>
  
</div>

<script src="./layui/layui.js"></script>
<script>

$(document).on('click','.menu-btn',function(){
  if($(this).find('i').hasClass('layui-icon-shrink-right')){
    $(this).find('i').removeClass('layui-icon-shrink-right');
    $(this).find('i').addClass('layui-icon-spread-left');
    $('.layui-layout-admin .layui-side').animate({
      width:"0"
    },200);

    $('.layui-layout-admin .layui-logo').animate({
      width:"0"
    },200);

    $('.menu-btn').animate({
      left:"10"
    },200);
    $('.layui-layout-admin .layui-body').animate({
      left:"0"
    },200);
  }else{
    $(this).find('i').removeClass('layui-icon-spread-left');
    $(this).find('i').addClass('layui-icon-shrink-right');
    $('.layui-layout-admin .layui-side').animate({
      width:"200px"
    },200);

    $('.layui-layout-admin .layui-logo').animate({
      width:"200px"
    },200);

    $('.menu-btn').animate({
      left:"200px"
    },200);
    $('.layui-layout-admin .layui-body').animate({
      left:"200px"
    },200);
  }
})
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
  
});

//Demo
layui.use('form', function(){
  var form = layui.form;  
});

//核算
$(document).on('click','.count-list-cont .num-btn',function(){
  $(this).closest('.count-list-cont').find('.num-btn').removeClass('select');
  $(this).addClass('select');

  var btn_val = parseFloat($(this).data('value'));
  var price = parseFloat($(this).closest('.count-list-box').find(".pay").data('value'));
  var price2 = parseFloat($(this).closest('.count-list-box').find(".pay").data('total'));

  var total = price2*(1+btn_val);
  total = total.toFixed(2);

  $(this).closest('.count-list-box').find(".pay").html('$'+total);
  $(this).closest('.count-list-box').find(".pay").data('value', total);
  var all_price = 0;
  $('.count-list-box .pay').each(function(){
    all_price += parseFloat($(this).data('value'));
  })

  $('.pay-total').html('$' + all_price.toFixed(2));
  $('.pay-total').data('value', all_price)

})

//点击修改
$(document).on('click','.count-list-cont .count-edit',function(){
  $(this).closest('.count-list-box').find(".pay").hide();
  $(this).closest('.count-list-box').find(".pay-edit").show();
})

//点击保存
$(document).on('click','.pay-edit-btn .keep-btn',function(){
  $(this).closest('.pay-edit').hide();
  $(this).closest('.count-list-box').find(".pay").show();

  var edit_val = 0;
  if($(this).closest('.pay-edit').find('input').val() == ''){
    edit_val = parseFloat($(this).closest('.count-list-box').find(".pay").data('total'));
  }else{
    edit_val = parseFloat($(this).closest('.pay-edit').find('input').val()).toFixed(2);
  }
  $(this).closest('.count-list-box').find(".pay").html('$'+edit_val);
  $(this).closest('.count-list-box').find(".pay").data('value', edit_val);
  //计算订单总额
  var all_price = 0;
  $('.count-list-box .pay').each(function(){
    all_price += parseFloat($(this).data('value'));
  })
  $('.pay-total').html('$' + all_price.toFixed(2));
  $('.pay-total').data('value', all_price);
  
})


//点击全额支付按钮样式
$(document).on('click','.count-list-cont .count-list-btn',function(){
  //按钮选中样式
  $(this).closest('.count-list-box').find('.count-list-btn').removeClass('select');
  $(this).addClass('select');
})

//点击全额支付
$(document).on('click','.count-list-cont .all-pay',function(){
  
  //隐藏与显示
  $(this).closest('.count-list-box').find('.pay-edit').hide();
  $(this).closest('.count-list-box').find(".pay").show();

  // 给赋值
  var amount_val =  parseFloat($(this).closest('.count-list-box').find(".pay").data('total'));
  $(this).closest('.count-list-box').find(".pay").html('$'+amount_val);
  $(this).closest('.count-list-box').find(".pay").data('value', amount_val);

  //计算订单总额
  var all_price = 0;
  $('.count-list-box .pay').each(function(){
    all_price += parseFloat($(this).data('value'));
  })
  $('.pay-total').html('$' + all_price.toFixed(2));
  $('.pay-total').data('value', all_price);

})

//商品数量框聚焦\失去焦点事件
$(document).on('focus','.goods-num .layui-input',function(){
  $(this).val('');
})

$(document).on('blur','.goods-num .layui-input',function(){
  //文本框初值
  var inpt_val = $(this).data('value');
  //商品单价
  var goods_price = parseFloat($(this).closest('.goods-item').find('span').text());
  var goods_num = 0;
  var goods_allprice = 0;
  if($(this).val() == ''){
    $(this).closest('.goods-js').find('.layui-input').val(inpt_val);
    goods_allprice = parseFloat(inpt_val*goods_price).toFixed(2);
    $(this).closest('.goods-js').find('.goods-money').html('$'+goods_allprice);
  }else{
    goods_num = $(this).val();
    goods_allprice = parseFloat(goods_num*goods_price).toFixed(2);
    $(this).closest('.goods-js').find('.goods-money').html('$'+goods_allprice);
  }
})

</script>
</body>
</html>